.motor-switch {
  margin: 5px;
  width: 100%;
  display: flex;
  height: 40px;
  align-items: center;


  .switch {
    flex: 1;
    position: relative;

    .bar {
      line-height: 20px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      background-color: #202020;
      border-radius: 10px;

      .state-text {
        color: white;
      }
    }

    .btn-dot {
      height: 40px;
      width: 40px;
      background-color: #DBDBDB;
      position: absolute;
      border-radius: 50%;
      top: -10px;
      transition: all .2s;

      .ring-1 {
        background-color: white;
        width: 35px;
        height: 35px;
        margin: 2.5px;
        border-radius: 50%;
        overflow: hidden;

        .ring-2 {
          background-color: #DBDBDB;
          width: 30px;
          height: 30px;
          margin: 2.5px;
          border-radius: 50%;
        }
      }
    }

    .btn-dot-forward {
      right: 10px
    }

    .btn-dot-backward {
      left: 10px
    }

    .btn-dot-off {
      left: calc(50% - 20px)
    }
  }

  .state-point {
    width: 12px;
    height: 12px;
    margin: 0 12px 0 12px;
    border-radius: 50%;
    transition: background-color .5s;
  }

  .state-point-forward {
    background-color: #FF8800;
  }

  .state-point-off {
    background-color: #00FF00;
  }

  .state-point-backward {
    background-color: #FF0000;
  }
}